<template>
	<view style="padding: 30rpx;">
		<view class="searchBox" :class="{'active' : isActive}" style="margin-bottom: 2%;">
			<uni-search-bar style="margin-bottom: 5%;"
							@input="onInput"
							@confirm="onSearch(searchValue)" 
							@focus="onfocusSearch"
							@cancel="oncancelSearch"
							v-model="searchValue">
			</uni-search-bar>

			
			<!-- 权限按钮 -->
			<text style="margin-left: 4%;margin-top: 2%;">搜索范围</text>
			
			<radio-group class="selectBtn" @change="selectSearchScope">
				<label class="radio-label">
					<radio value="self":checked="selected === 'self'"></radio>
					仅自己
				</label>
				<label class="radio-label">
					<radio value="friends":checked="selected === 'friends'"></radio>
					仅好友
				</label>
				<label class="radio-label">
					<radio value="public":checked="selected === 'public'"></radio>
					所有人
				</label>
		    </radio-group>
			
			<!-- 搜索模式 -->
			<text style="margin-left: 4%">搜索模式</text>
			
			<checkbox-group class="modeBtn" @change="selectSearchMode">
				<label class="mode-label">
				    <checkbox :value="0" :checked="checkedValues[0] === 1">标题</checkbox>
				</label>
				<label class="mode-label">
				    <checkbox :value="1" :checked="checkedValues[1] === 1">正文</checkbox>
				</label>
				<label class="mode-label">
				    <checkbox :value="2" :checked="checkedValues[2] === 1">用户名</checkbox>
				</label>
				<label class="mode-label">
				    <checkbox :value="3" :checked="checkedValues[3] === 1">标签</checkbox>
				</label>
			</checkbox-group>
		
			<view class="delete-history">
				<text style="margin-left: 4%; margin-right: auto;">搜索历史</text>
				<text style="margin-right: 3%; color: blue;" @tap="clearHistory" >清除</text>
			</view>
			
			<view class="search-history">
				<view v-for="(item, index) in searchHistory.slice().reverse()" :key="index" 
				      class="history-item" 
				      @click="onHistoryClick(item)"
					  @longpress="deleteHistoryItem(item)">
					{{ item }}
				</view>
			</view>
		</view>
		
		<!-- 笔记 -->
		<view class="container">
			
		    <view class="column">
				<view class="note" v-for="(item, index) in leftColumnNotes" :key="index" @click="goNoteView(item.note_id, item.file)">
					<view class="title">{{ item.title }}</view>
					<view class="summary">{{ item.summary }}</view>
				</view>
		    </view>
			
		    <view class="column">
				<view class="note" v-for="(item, index) in rightColumnNotes" :key="index" @click="goNoteView(item.note_id, item.file)">
					<view class="title">{{ item.title }}</view>
					<view class="summary">{{ item.summary }}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	
	export default {
		
		data() {
			return {
				searchValue: '',
				
				notes: [
					
				],
				searchHistory: [
					
				],
				user:[
					
				],
				isActive: false,
				
				selected:'public',	//范围选择
				checkedValues: [1, 1, 1, 1],	//模式选择
				
			}
		},
		
		onLoad(option){
			this.user = uni.getStorageSync('xm-user');
			this.searchValue = option.search;
			this.onSearch(',');
		},
		
		methods: {
			
			//输入文本内容后发生
			onInput(){
				
			},
			
			//聚焦搜索框时发生
			onfocusSearch(){
				this.isActive = true;
			},
			
			//取消搜索时发生
			oncancelSearch(){
				this.isActive = false;
			},
			
			goNoteView(noteId, fileName){
				uni.navigateTo({
					url:'/pages/noteView/noteView?noteId=' + noteId + '&FileName=' + fileName
				})
			},
			
			saveSearchHistory(query) {
				this.searchHistory.push(query);
				// 保存到本地存储
				uni.setStorageSync('searchHistory', this.searchHistory);
			},
			
			clearHistory(){
				uni.showModal({
				    title: '提示',
				    content: '确定清除搜索历史?',
				    success: (res) => {
						if (res.confirm) {
							if(this.searchHistory == ''){
								uni.showToast({
									icon: 'error',
									title: '历史已为空',
									duration: 800
								});
							} else {
								this.searchHistory = [];
								uni.setStorageSync('searchHistory', this.searchHistory);
								uni.showToast({
									icon: 'success',
									title: '已清空',
									duration: 800,
								});
								console.log('清除搜索历史成功');
							}
						} else if (res.cancel) {
							console.log('用户取消');
				        }
				    }
				});
			},
			
			onHistoryClick(item) {
		    	this.searchHistory.splice( this.searchHistory.indexOf(item) , 1 );
			    this.searchValue = item;
			    this.onSearch(this.searchValue);
			},
			
			onSearch(query){
				// 设定最大输入长度
				this.notes = [];
				const maxLength = 25;
				if (query.length > maxLength) {
				    query = query.substring(0, maxLength);
				}
				if (query !== '') {
					this.saveSearchHistory(query);
				}
				
				let that = this;
				let form0 = {
					content: query,
					userId: this.user.id,
					scope: this.selected,
					query: this.checkedValues				
				};
				
				let form = JSON.parse(JSON.stringify(form0));
				console.log(form);
				uni.request({
					url: config.baseUrl + '/note/find',
					data: form,
					method:'GET',
					success(res){
						console.log(form);
						console.log("-----------------");
						that.notes = res.data;
						console.log(res.data);
						console.log(that.notes);
	
					},
					fail(res){
						console.log(res.data);
					}
				})
				
				this.isActive = false;
			},
			
			//删除历史搜索项
			deleteHistoryItem(item){
				uni.showModal({
				    title: '提示',
				    content: '删除该条历史?',
				    success: (res) => {
						if (res.confirm) {
							this.searchHistory.splice( this.searchHistory.indexOf(item) , 1);
							uni.setStorageSync('searchHistory', this.searchHistory);
							console.log('删除成功');
						} else if (res.cancel) {
							console.log('用户取消删除');
				        }
				    }
				});
			},
			
			// 搜索范围处理...
			selectSearchScope(e) {
			    this.selected = e.detail.value;
			},
			
			// 搜索模式处理...
			selectSearchMode(event) {
				this.checkedValues = [0,0,0,0];
				console.log(event.detail.value);
				for (var i = 0, lenI = event.detail.value.length; i < lenI; ++i) {
					this.checkedValues[event.detail.value[i]] = 1;
				}
				console.log(JSON.parse(JSON.stringify(this.checkedValues)));
			}
		},
		
		computed: {
		    leftColumnNotes() {
		      return this.notes.filter((note, index) => index % 2 === 0);
		    },
		    rightColumnNotes() {
		      return this.notes.filter((note, index) => index % 2 !== 0);
		    },
		},
	}
</script>

<style scoped>
	.searchBox {
		background-color: white;
		padding: 20rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
		height: 55px;
		overflow: hidden;
		transition-duration: 300ms;
	}
	
	.searchBox.active{
		overflow: auto;
		height: 400px;
	}
	
	.container {
		background-color: white;
		padding: 20rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		
		display: flex;
		justify-content: space-between;
	}
	
	.column {
		width: 48%;
	}
	
	.note {
		background-color: #f8f8f8;
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 5px;
		word-wrap: break-word;
	}
	
	.title {
		font-weight: bold;
	}
	
	.summary {
		margin-top: 5px;
		color: #666;
	}
	
	.search-history{
		display: flex;
		flex-wrap: wrap;
		margin-left: 2%;
		margin-bottom: 20%;
	}
	
	.history-item {
		padding: 10px;
		border-bottom: 1px solid #ccc;
		cursor: pointer;
		border-radius: 20rpx;
	}
	
	.delete-history{
		display: flex;
		width: 100%;
	}
	
	/* 下面为单选按钮设计 */
	.selectBtn{
		display: flex;
		padding: 10px;
		justify-content: space-around;
	}
	
	.modeBtn{
		display: flex;
		padding: 15px;
		justify-content: space-around;
	}
</style>
